<template>
    <div>
        <h3>新建固资记录</h3>
        <el-form ref="createRecordFormRef" :model="createRecord" :rules="rules" class="demo-ruleForm" :size="formSize" status-icon>
            <el-form-item label="来源" prop="source">
                <el-select v-model="createRecord.source" placeholder="选择数据来源">
                    <el-option v-for="item in assetSourceTypes" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="名称" prop="name">
                <el-input v-model="createRecord.name" />
            </el-form-item>
            <el-form-item label="类型" prop="financialType">
                <el-select v-model="createRecord.financialType" placeholder="选择类型">
                    <el-option v-for="item in assetsFinancialType" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="资金" prop="fundNum">
                <el-input-number v-model="createRecord.fundNum" />
            </el-form-item>
            <el-form-item label="统计日期" prop="date">
                <el-date-picker v-model="createRecord.date" type="date" placeholder="Pick a day" :disabled-date="disabledDate" :shortcuts="shortcuts" />
            </el-form-item>
            <el-form-item>
                <el-button class="confirm" type="primary" @click="submitFormCreate(createRecordFormRef)"> 确定 </el-button>
                <el-button @click="resetForm(createRecordFormRef)">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import { assetSourceTypes, assetsFinancialType } from "@/constant/constant";
import { createAssetRecordAPI } from "src/httpApi/assetHttp";
import type { ComponentSize, FormInstance, FormRules } from "element-plus";
import { ElMessage } from "element-plus";
import { nextTick } from "vue";

const formSize = ref<ComponentSize>("default");
const createRecordFormRef = ref<FormInstance>();
const createRecord = reactive<any>({
    source: "",
    name: "",
    financialType: "",
    fundNum: null,
    date: null,
});

const rules = reactive<FormRules<any>>({
    source: [{ required: true, message: "请选择来源", trigger: "blur" }],
    name: [{ required: true, message: "请填写名称", trigger: "blur" }],
    financialType: [{ required: true, message: "请选择来源", trigger: "blur" }],
    fundNum: [{ required: true, message: "请输入资金", trigger: "blur" }],
    principal: [{ required: true, message: "请输入本金", trigger: "blur" }],
    date: [{ required: true, message: "请选择时间", trigger: "blur" }],
});

const submitFormCreate = async (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log("submit!", createRecord);
            addRecord();
        } else {
            console.log("error submit!", fields);
        }
    });
};

const resetForm = (formEl: any | undefined) => {
    console.log(formEl);

    if (!formEl) return;
    formEl.resetFields();
};

const addRecord = async () => {
    const res = await createAssetRecordAPI(createRecord);
    if (res.code === 200) {
        ElMessage({
            message: "创建成功！",
            type: "success",
        });
        // 使用 nextTick 确保 DOM 更新之后再执行 resetForm
        nextTick(() => {
            if (createRecordFormRef.value) {
                resetForm(createRecordFormRef.value);
            } else {
                console.log("Form ref is undefined");
            }
        });
    } else {
        ElMessage({
            message: "创建失败！",
            type: "error",
        });
    }
};

const shortcuts = [
    {
        text: "Today",
        value: new Date(),
    },
    {
        text: "Yesterday",
        value: () => {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            return date;
        },
    },
    {
        text: "A week ago",
        value: () => {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            return date;
        },
    },
];

const disabledDate = (time: Date) => {
    return time.getTime() > Date.now();
};
</script>

<style scoped>
.confirm {
    margin-left: 80px;
}
</style>
